<!--
 * @Descripttion: 面积计算表统计
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-12-07 09:59:45
 * @LastEditors: GW
 * @LastEditTime: 2021-12-15 18:22:20
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->

            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                            <div class="btns" @click="sync">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                        <!-- <a-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                            <div class="btns" v-print="'#printBox'">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col> -->
                    </a-col>
                </a-row>
            </div>
            <div class="documents-wrapper" id="documents-wrapper">
                <h3 class="text-center">
                    {{voucherTitle}}
                </h3>
                <!-- <div class="choice-project">
                    <div class="choice-item">
                        项目：
                    </div>
                    <div class="choice-item select-item">
                        <a-select v-model="projectName" @change="handleChange" placeholder="请选择项目查看统计结果" style="border:1px solid #a0a0a0;width:100%;border-bottom:none;">
                            <a-select-option :data-id="item.id" v-for="item in projectSelect" :key="item.name">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </div>
                </div> -->
                <a-tabs :activeKey="activeKey" @change="callback">
                    <a-tab-pane :key="1" tab="项目完成情况统计">
                        <a-table :columns="columnsProject" :data-source="dataProject" bordered>
                            <template slot="operation" slot-scope="text,record,index">
                                <span style="color:#40a9ff;cursor:pointer;padding:0 10px 0 0" @click="patchGetData(record.id)">批次统计</span>
                            </template>
                        </a-table>
                    </a-tab-pane>
                    <a-tab-pane :key="2" tab="批次完成情况统计">
                        <a-table class="spectaculars-table" :columns="columnsBatch" :data-source="dataBatch" @expand="getRoute" :expandedRowKeys="expandedRowKeys" @expandedRowsChange="expandedRowsChange" bordered>
                            <div slot="expandedRowRender" slot-scope="record" style="margin: 0">
                                <a-row>
                                    <a-col style="padding:10px;" :span="6" v-for="d in record.innerRoute" :key="d">
                                        <div style="border:1px solid #ccc;padding:5px;">
                                            <p>工序编码：{{d.workCode}}</p>
                                            <p>工序名称：{{d.workName}}</p>
                                            <p>汇 报 数：{{d.procedureNum?d.procedureNum:0}}</p>
                                        </div>
                                    </a-col>
                                </a-row>
                            </div>
                            <template slot="operation" slot-scope="text,record,index">
                                <span style="color:#40a9ff;cursor:pointer" @click="warehouseDisplay(record.id,record)">看板</span>
                            </template>
                        </a-table>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>

        <div class="flex_tial" v-if="Warehouse_type">
            <div class="warehose_maun">
                <div class="btn margin-left-10" @click="exit_ware">关闭看板</div>
                <div class="btn margin-left-10" v-if="isFullScreen" @click="exitFullscreenExit">还原</div>
                <div class="btn" v-else @click="enterFullscreen">全屏</div>
            </div>
            <div class="warehose_name_title">生产看板</div>
            <div class="time-text" :style="isFullScreen?bigStyle:''">{{time}}</div>
            <div style="min-height:200px;">
                <!-- <a-table style="padding:10px;" :columns="columnsBatchData" :data-source="dataBatchSingle" :pagination="false" bordered>
                </a-table> -->
                <a-row>
                    <a-col :span="5">
                        <div class="batch-data-box">
                            <div class="item">批次：<span class="item-number">{{dataBatchSingle[0].batch}}</span></div>
                            <div class="item">客户订单号：<span class="item-number">{{dataBatchSingle[0].customerOrderNumber}}</span></div>
                            <div class="item">累积执行数量：<span class="item-number">{{dataBatchSingle[0].cumExecuteQuantity}}</span></div>
                            <div class="item">工艺路线名称：{{dataBatchSingle[0].processRouteName}}</div>
                            <div class="item">项目名称：{{dataBatchSingle[0].projectName}}</div>
                            <div class="item">项目编码：{{dataBatchSingle[0].projectCode}}</div>
                            <div class="item">单据编码：{{dataBatchSingle[0].voucherCode}}</div>
                            <div class="item">单据日期：{{dataBatchSingle[0].voucherDate}}</div>
                            <div>总 数 量：<span class="item-number">{{dataBatchSingle[0].totalQuantity}}</span></div>
                        </div>
                    </a-col>
                    <a-col :span="19">
                        <a-col style="padding:10px;" :span="6" v-for="d in routeData" :key="d">
                            <div class="route-item">
                                <!-- <div>工序编码：{{d.workCode}}</div> -->
                                <div>工序名称：{{d.workName}}</div>
                                <div>汇 报 数：<span class="item-number">{{d.procedureNum?d.procedureNum:0}}</span></div>
                            </div>
                        </a-col>
                        <div class="warehose_picture">
                            <div class="warehose_picture_left">
                                <v-chart ref="registers_creditChart" :options="options" :auto-resize='true' theme='walden' :style="{width:'100%'}" />
                            </div>
                            <div class="warehose_picture_right">
                                <v-chart ref="registers_creditChart" :options="optionsInOut" :auto-resize='true' theme='walden' :style="{width:'100%'}" />
                            </div>
                        </div>
                    </a-col>
                </a-row>

            </div>

        </div>

        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
    </div>

</template>
<script>

import { getAction } from "@/api/manage";
import { projectSituation, patchSituation, getBatchApi } from '@/api/sale/areaCalculation';
import walden from '@/utils/echarts/theme/walden'
export default {
    components: {
        'v-chart': VueECharts,
    },
    data () {
        return {
            columnsBatch: [
                { dataIndex: 'batch', title: '批次' },
                { dataIndex: 'customerOrderNumber', title: '客户订单号' },
                { dataIndex: 'cumExecuteQuantity', title: '累积执行数量' },
                { dataIndex: 'processRouteName', title: '工艺路线名称' },
                { dataIndex: 'projectCode', title: '项目编码' },
                { dataIndex: 'projectName', title: '项目名称' },
                { dataIndex: 'reviewerUserName', title: '审核人' },
                // { dataIndex: 'totalQuantity', title: '总数量' },
                { dataIndex: 'voucherCode', title: '单据编码' },
                { dataIndex: 'voucherDate', title: '单据日期' },
                { dataIndex: 'totalQuantity', title: '总数量' },
                { dataIndex: '', title: '操作', scopedSlots: { customRender: 'operation' }, width: 120, align: 'center' },
            ],

            columnsBatchData: [
                { dataIndex: 'batch', title: '批次' },
                { dataIndex: 'customerOrderNumber', title: '客户订单号' },
                { dataIndex: 'cumExecuteQuantity', title: '累积执行数量' },
                { dataIndex: 'processRouteName', title: '工艺路线名称' },
                { dataIndex: 'projectCode', title: '项目编码' },
                { dataIndex: 'projectName', title: '项目名称' },
                // { dataIndex: 'reviewerUserName', title: '审核人' },
                { dataIndex: 'voucherCode', title: '单据编码' },
                { dataIndex: 'voucherDate', title: '单据日期' },
                { dataIndex: 'totalQuantity', title: '总数量' },
            ],

            columnsProject: [{
                dataIndex: 'number',
                title: '序号',
                align: 'center',
                customRender: (text, record, index) => {
                    return index + 1;
                }
            },
            { dataIndex: 'projectName', title: '项目名称' },
            { dataIndex: 'projectCode', title: '项目编码' },
            { dataIndex: 'batchNum', title: '当前所有批次数量' },
            { dataIndex: 'batchStr', title: '所有批次' },
            { dataIndex: 'cumCompletedQuantity', title: '累积完成数量' },
            { dataIndex: 'liablePersonNames', title: '负责人' },
            { dataIndex: 'planBeginDate', title: '计划开始日期' },
            { dataIndex: 'planEndDate', title: '计划完成日期' },
            {
                dataIndex: 'projectStatus', title: '项目状态', customRender: (text, record, index) => {
                    return text == 0 ? '未开始' : text == 1 ? '进行中' : text == 2 ? '已完成' : text == 3 ? '已归档' : '';
                }
            },
            {
                dataIndex: '', title: '操作', scopedSlots: { customRender: 'operation' }, width: 120, align: 'center',
            }
            ],
            dataBatch: [],//批次统计数据
            dataProject: [],//项目统计数据
            projectId: null,
            projectName: null,
            projectSelect: [],
            activeKey: 1,
            expandedRowKeys: [],
            Warehouse_type: false,
            dataList: [], // 看板数据
            dataUid: '',
            intervalId: null,
            dataBatchSingle: [],
            routeData: [],  //工序数据
            routeDataXAxis: [], //柱状图横坐标
            routeDataNum: [],   //柱状图数据
            options: {},//生产情况
            optionsInOut: {},//出入库

            outNum: 0,//入库数量
            inNum: 0,//出库数量
            loading: false,
            isFullScreen: false,//是否是全屏显示
            bigStyle: {
                'margin-top': '60px'
            },//全屏时候的样式
            time: '',//时间
            timeOut: null,
        };
    },
    watch: {
        routeDataXAxis (newValue, oldValue) {
            this.routeDataXAxis = newValue;
            this.orgOptions() //监听到了，重新定义数据，即重绘
        },
        routeDataNum (newValue) {
            this.routeDataNum = newValue;
            this.orgOptions() //监听到了，重新定义数据，即重绘
        },
        inNum (newValue) {
            this.inNum = newValue;
            this.orgOptionsInOut();
        },
        outNum (newValue) {
            this.outNum = newValue;
            this.orgOptionsInOut();
        }
    },
    created () {
        // this.getPorjectData();//获取项目
        this.projectGetData();//获取所有项目完成情况统计列表
        // this.dataRefreh();

    },
    computed: {
        voucherTitle: function () {
            return this.$route.meta.name;
        }
    },
    destroyed () {
        this.clear();
    },
    mounted () {
        this.orgOptions();//柱状图
        this.orgOptionsInOut();//出入库情况
    },
    methods: {
        walden,
        orgOptions () {
            //生产情况
            this.options = {
                title: {
                    text: '产品加工情况',
                    textStyle: {
                        color: '#19D0D8'
                    },
                    x: 'center'
                },
                tooltip: {
                    show: true
                },
                xAxis: [{
                    name: '工艺',
                    type: 'category',
                    axisLabel: {
                        interval: 0,//标签显示间隔
                        // rotate: 20,//标签倾斜度数
                    },
                    grid: {
                        let: '10%',//距离左边
                        bottom: '40%',//距离下边
                    },
                    data: this.routeDataXAxis,
                    nameTextStyle: {
                        fontWeight: 'bold',
                        color: '#19D0D8',
                        fontSize: 14,
                    }
                }],
                yAxis: [{
                    name: '数量',
                    nameTextStyle: {
                        fontWeight: 'bold',
                        color: '#19D0D8',
                        fontSize: 14,
                    },
                    // min: 10,
                    // interval: 1,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#19D0D8',
                            fontSize: 14,
                        }
                    }
                }],
                series: [{
                    name: "生产示意图",
                    type: "bar",
                    barWidth: '50%',
                    data: this.routeDataNum,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'rgba(231, 122, 14)',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                    // showBackground:true,
                    // backgroundStyle:{
                    //     color: 'rgba(180, 180, 180, 0.2)'
                    // }
                }]
            }
        },
        orgOptionsInOut () {
            //出入库
            this.optionsInOut = {
                title: {
                    text: '出入库情况',
                    textStyle: {
                        color: '#19D0D8'
                    },
                    // subtext: '动态数据',
                    x: 'center'
                },
                series: [
                    {
                        type: 'pie',
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'inner',
                                    formatter: function (params) {
                                        return params.data.name + ':' + params.data.value;
                                        // {(params.percent - 0) + '%'}
                                    },
                                    textStyle: {
                                        color: '#FFF',
                                        fontSize: 14
                                    }
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            {
                                value: this.outNum,
                                name: '出库数量'
                            },
                            {
                                value: this.inNum,
                                name: '入库数量'
                            }
                        ],
                        roseType: 'area'
                    }
                ]
            }
        },
        // 看板显示
        warehouseDisplay (id, record) {
            this.dataUid = id;
            console.log(record, this.routeData)
            let requestData = { mainId: id };

            if (record && record.id) {
                this.loading = true;//加载中
                this.Warehouse_type = false;
                // this.showtime();//显示时间
                this.timeOut = setInterval(this.showtime, 1000);
                console.log('获取工艺路线')
                this.getRoute('', record)
            }

            this.dataRefreh();
            if (this.routeData.length > 0) {
                getBatchApi(requestData).then(response => {
                    if (response.code === 200) {
                        this.loading = false;
                        this.Warehouse_type = true;//显示看板

                        this.dataBatchSingle = [response.data];
                        this.routeDataNum = [];

                        let data = response.data;
                        if (data.projectBatchExecutionStatisticsVos.length > 0) {
                            this.routeData.forEach(e => {
                                data.projectBatchExecutionStatisticsVos.forEach(p => {
                                    if (e.id == p.processRouteDetailId) {
                                        //赋值工序汇报数量
                                        if (p.procedureNum) {
                                            e.procedureNum = p.procedureNum;
                                            this.routeDataNum.push(p.procedureNum)
                                        } else {
                                            e.procedureNum = 0;
                                            this.routeDataNum.push(0)
                                        }
                                    }
                                });
                            });


                        } else {
                            this.routeData.forEach(item => {
                                this.routeDataNum.push(0);
                            });
                        }

                        //出入库
                        if (data.barcodeInOutStatisticVo && data.barcodeInOutStatisticVo.inNum) {
                            this.inNum = data.barcodeInOutStatisticVo.inNum
                            this.outNum = data.barcodeInOutStatisticVo.outNum
                        } else {
                            this.inNum = 0;
                            this.outNum = 0;
                        }

                    } else {
                        // this.$message.warning(response.message);
                    }
                })
            }
        },
        showtime () {
            var date = new Date();//创建一个日期对象的实例,new代表创建，Date是一个时间对象，连起来就是创建对象，并用变量date接收，实例就是一个实实在在的东西
            console.log(date);//在控制台输出date的值
            var year = date.getFullYear();
            var month = date.getMonth() + 1;//这里系统定义的月份是从0到11定义的，而加一的目的就是让它变成从1到12，这样就可以实现正常的月份了
            var day = date.getDate();
            var hour = date.getHours();
            if (hour < 10) {
                hour = '0' + hour;
            }//这里用if语句的原因是当我们的时间走到一位数字时就会出现闪动，会使整个代码混乱，为了解决这一缺点在个位数前面用拼接的方法加一个0，这样就形成了两位数，这样就不会出现闪动。分钟和秒也是一样
            var minute = date.getMinutes();
            if (minute < 10) {
                minute = '0' + minute;
            }
            var second = date.getSeconds();
            if (second < 10) {
                second = '0' + second;
            }
            this.time = year + '年' + month + '月' + day + '日  ' + hour + ':' + minute + ':' + second;

        },
        tailList (val) {
            console.log(val)
            getAction('erp/processRoute/getDetailList', { 'id': val.id }).then(response => {
                console.log(response)
            })
        },


        // 定时器
        dataRefreh () {
            let _this = this;
            // 计时器正在进行中，退出函数
            if (this.intervalId != null) {
                return;
            }
            // 计时器为空，操作
            this.intervalId = setInterval(() => {
                this.warehouseDisplay(_this.dataUid)
            }, 2000);
        },

        // 停止定时器
        clear () {
            clearInterval(this.intervalId); //清除计时器
            this.intervalId = null; //设置为null
            this.routeData = [];
            clearTimeout(this.timeOut);
            this.timeOut = null;
        },

        enterFullscreen () {
            this.isFullScreen = true;
            //全屏
            let docElm = document.documentElement;
            //W3C
            // if (docElm.requestFullscreen) {
            //     docElm.requestFullscreen();
            // }
            //FireFox
            if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
            //IE11
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
        },
        exitFullscreenExit () {
            this.isFullScreen = false;
            //退出全屏
            //W3C
            // if (document.exitFullscreen) {
            //     document.exitFullscreen();
            // }
            //FireFox
            if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            //Chrome等
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
            //IE11
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        },

        // 关闭看板
        exit_ware () {
            this.Warehouse_type = false;
            this.exitFullscreenExit();
            this.clear();
        },



        //获取项目列表
        getPorjectData () {
            getAction('/erp/project/pageList', { 'size': 1000 }).then(response => {
                if (response.code === 200) {
                    this.projectSelect = response.data.records;
                    this.projectSelect.unshift({
                        name: '全部',
                        id: null,
                    })
                }
            })
        },
        handleChange (key, val) {
            this.projectId = val.data.attrs['data-id'];
            console.log(this.projectId)

            this.patchGetData();
        },
        callback (key) {
            this.activeKey = key;
        },
        //项目统计列表查询
        projectGetData () {
            projectSituation().then(response => {
                this.dataProject = response.data;
            })
        },
        //批次统计列表查询
        patchGetData (projectId) {
            console.log(projectId);
            let requestData = {
                projectId: projectId,
            }
            patchSituation(requestData).then(response => {
                if (response.code === 200) {
                    let data = response.data;
                    data.forEach(item => {
                        item.innerRoute = [];
                    });
                    this.expandedRowKeys = [];//关闭表格展开列
                    this.dataBatch = data;
                    this.activeKey = 2;
                } else {
                    // this.$message.warning(response.message);
                }
            }).catch((e) => {
                this.$message.warning(e);
            })
        },
        //表格展开数据
        expandedRowsChange (e) {
            console.log(this.expandedRowKeys);
            this.expandedRowKeys = e;
        },
        //根据工艺路线获取工序
        getRoute (expanded, record) {
            console.log(expanded, record);
            getAction('erp/processRoute/getDetailList', { 'id': record.processRouteId }).then(response => {
                if (response.code === 200) {
                    let data = response.data;
                    data.forEach(e => {
                        record.projectBatchExecutionStatisticsVos.forEach(p => {
                            if (e.id == p.processRouteDetailId) {
                                //赋值工序汇报数量
                                e.procedureNum = p.procedureNum ? p.procedureNum : 0;
                            }
                        });
                    });
                    record.innerRoute = data;
                    this.routeData = data;

                    // //工序组装
                    let rou = [];
                    data.forEach(item => {
                        rou.push({
                            value: item.workName,
                            textStyle: {
                                fontSize: 14,
                                color: '#19D0D8',
                            }
                        })
                    });
                    console.log(rou);
                    this.routeDataXAxis = rou;

                    console.log('this.dataBatch:', this.dataBatch)
                }
            })
        },
        sync () {
            this.projectGetData();//获取所有项目完成情况统计列表
            this.activeKey = 1;
            this.dataBatch = [];
            this.expandedRowKeys = [];
        }
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .choice-project {
        width: 300px;
        margin-top: 10px;
        text-align: right;
        margin-bottom: 10px;
        display: flex;
        line-height: 36px;
        .choice-item {
            flex: 1;
        }
        .choice-item:nth-child(1) {
            flex: 0 0 50px;
        }
    }

    // 看板样式

    .flex_tial {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 47, 71);
        // background: #fff;
        padding: 10px;
        z-index: 1;
        .batch-data-box {
            margin-top: 10px;
            color: #19d0d8;
            border: 1px solid #19d0d8;
            letter-spacing: 1px;
            line-height: 46px;
            padding: 0px 10px;
            .item {
                border-bottom: 1px solid #19d0d8;
            }
            .item-number {
                font-size: 16px;
                font-weight: bold;
                color: rgba(231, 122, 14);
            }
        }
        .time-text {
            color: #19d0d8;
            font-size: 18px;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
        }
        .route-item {
            div {
                line-height: 32px;
            }
            border: 1px solid #19d0d8;
            padding: 5px;
            color: #19d0d8;
            font-size: 14px;
        }
        .item-number {
            font-size: 18px;
            font-weight: bold;
            color: rgba(231, 122, 14);
        }
        // .spectaculars-table {
        .ant-table-tbody > tr > td,
        .ant-table-header th {
            color: #19d0d8 !important;
        }
        .ant-table-thead > tr > th {
            color: #19d0d8 !important;
            background: rgba(0, 0, 0, 0);
        }
        // }
        div::-webkit-scrollbar {
            display: none;
        }
    }
    .warehose_maun {
        display: flex;
        flex-direction: row-reverse;
        height: 32px;
        .btn {
            cursor: pointer;
            height: 32px;
            color: #19d0d8;
            border: 1px solid #19d0d8;
        }
    }

    .warehose_list {
        max-height: 300px;
        min-height: 200px;
        overflow: scroll;
        border: 1px solid #cacaca;
    }

    .warehose_name_title {
        width: 100%;
        text-align: center;
        color: #19d0d8;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .warehose_picture {
        display: flex;
        padding: 10px;
        padding-top: 30px;
    }

    .warehose_picture_left {
        width: 60%;
    }
    .warehose_picture_right {
        width: 40%;
    }

    .warehose_top {
        display: flex;
        .warehose_lit {
            width: 30%;
            border: 1px solid #cacaca;
            text-align: center;
        }
    }
</style>
